<script setup lang="ts">
import {reactive, toRaw, defineOptions, ref} from 'vue';
import {AForm} from '@/components/index';
import {useForm} from '@/hooks/index';
import Modal from './Modal.vue';

const formData: any = reactive({
  name: undefined,
  aiHao: undefined,
  date: undefined,
  num: undefined,
  onOff: false,
  sex: undefined,
});
const rules = reactive({
  name: [
    {required: true, message: '必填项'},
    {min: 2, max: 5, message: '长度3-5个字符'},
  ],
  aiHao: [{required: true, message: '必填项'}],
  date: [{required: true, message: '必填项'}],
  num: [{required: true, message: '必填项'}],
  sex: [{required: true, message: '必填项'}],
});
const formItem = [
  {id: '1', label: '姓名', itemKey: 'name', itemType: 'input'},
  {id: '2', label: '爱好', itemKey: 'aiHao', itemType: 'select', options: [{label: '打球', value: '1'}]},
  {id: '3', label: '选择时间', itemKey: 'date', itemType: 'date-range-picker'},
  {id: '4', label: '数字', itemKey: 'num', itemType: 'input-number', min: 0, max: 5},
  {id: '5', label: '开关', itemKey: 'onOff', itemType: 'switch', col: 24},
  {
    id: '6',
    label: '性别',
    itemKey: 'sex',
    itemType: 'radio',
    options: [
      {id: '1', label: '男', value: '2'},
      {id: '2', label: '女', value: '1'},
    ],
  },
];
const visible = ref<boolean>(false);
const showModal = () => {
  visible.value = true;
};
const {validateInfos, handleSubmit, handleReset} = useForm({formData, rules});
</script>

<template>
  <AForm
    :formData="formData"
    :formItem="formItem"
    :validateInfos="validateInfos"
    @submit="handleSubmit"
    @reset="handleReset"
  >
    <template #render_left>
      <a-button type="primary">新增</a-button>
      <a-button style="margin-left: 10px">导出</a-button>
    </template>
  </AForm>
  <a-button type="primary" @click="showModal">弹框测试Form组件</a-button>
  <Modal v-model:visible="visible" />
</template>

<style scoped lang="less"></style>
